<template>
    <view>
        <!-- 授权会员 -->
        <view v-if="false" style="display:flex;justify-content:center">
            <view class="phoneAuthorize">
                <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信授权手机号</button>
            </view>
            <view class="phoneAnother" @tap="fillPhone">填写其他手机号</view>
            <u-popup :show="memShow" mode="bottom" @close="onClose">
                <view class="pop" v-if="nextFlag">
                    <view class="pop__top">您正在开通XXX会员</view>
                    <view class="pop__conter">
                        <view class="pop__conter--text">您还需要完善以下信息</view>
                        <view class="pop__conter--phone">
                            <view class="pop__conter--phone--text">
                                手机*
                                <input placeholder="请输入手机号码" style="margin-left:70rpx">
                            </view>
                            <view class="pop__conter--phone--code">获取验证码</view>
                        </view>
                        <view class="pop__conter--phone">
                            <view class="pop__conter--phone--text">
                                验证码*
                                <input placeholder="请输入验证码" style="margin-left:40rpx">
                            </view>
                        </view>
                    </view>
                    <view style="display:flex;justify-content:center">
                        <view class="pop__next" @tap="nextInput">下一步</view>
                    </view>
                </view>
                <view class="pop" v-else>
                    <view class="pop__top">手机 15958075097</view>
                    <view class="pop__conter">
                        <view class="pop__conter--text">您还需要完善以下信息</view>
                        <view class="pop__conter--phone">
                            <view class="pop__conter--phone--text">
                                姓名*
                                <input placeholder="请输入姓名" style="margin-left:70rpx">
                            </view>
                        </view>
                        <view class="pop__conter--phone">
                            <view class="pop__conter--phone--text">
                                身份证号码*
                                <input placeholder="请输入18位身份证号码" style="margin-left:40rpx">
                            </view>
                        </view>
                    </view>
                    <view style="display:flex;justify-content:center">
                        <view class="pop__next">领取会员卡</view>
                    </view>
                </view>
            </u-popup>
        </view>
        <!-- 授权后购买会员 -->
        <view class="topUser ">
            <view class="topUser__left">
                <image :src="avatarUrl" style="width:80rpx;height:80rpx;border-radius:100%"></image>
                <view class="topUser__left--phone">{{nikeName}}</view>
            </view>
        </view>
        <swiper class="imageContainer" @change="handleChange" previous-margin="50rpx" next-margin="50rpx" circular
            indicator-dots="true" indicator-color="#a39f99" indicator-active-color="#f49641">
            <block v-for="(item, index) in memberCards" :key="index">
                <swiper-item class="imageContainer__swiperItem ">
                    <view :class="['imageContainer__swiperItem__content',currentIndex == index && 'imageContainer__swiperItem__content__active']">
                        <view style="font-size:36rpx;margin-bottom:8rpx;">{{item.title}}</view>
                        <view
                            style="font-size:24rpx;display:inline-block;color:#666;border-radius:32rpx;padding:4rpx 16rpx;background:#fff;">
                            {{item.rankName}}LV{{item.rankCode}}
                        </view>
                        <view v-if="item.openType == 1" class="imageContainer__swiperItem__paymount">
                            ¥{{item.openValue}}／{{item.useInDate}}天
                        </view>
                        <view v-if="item.openType == 2" class="imageContainer__swiperItem__paymount">
                            {{item.openValue}}积分／{{item.useInDate}}天
                        </view>
                    </view>
                    <image :class="['imageContainer__swiperItem__itemImg',currentIndex == index ? 'imageContainer__swiperItem__itemImg--active': '']" :src="item.backGroundPicUrl||defaultImg"></image>
                </swiper-item>
            </block>
        </swiper>
        <view class="privilege">
            <view style="display:flex;font-size:26rpx;">
                <view class="privilege__sign"></view>
                会员特权
            </view>
            <view class="privilege__conter">
                <view v-for="(item, index) in privilegeList" :key="index" class="privilege__conter--list ">
                    <view @tap="onPrivilegeTap" :data-index="index" class="privilege__conter--list--item">
                        <image :src="item.icon || ptypeMapIcon[item.ptype]" :class="['privilege-img',privilegeIndex===index?'-active':'']"></image>
                    </view>
                    <view style="width:100%;text-align:center;">{{item.privilegeName}}</view>
                </view>
            </view>
            <view class="privilege__desc">
                <view style="font-weight:bold">{{privilege.privilegeName}}</view>
                <view v-if="privilege.ptype == 1" style="margin-top:20rpx">
                    {{privilege.illustrate ? privilege.illustrate+(privilege.value ? '(折扣'+privilege.value/10+'折)' : '') : '暂无特殊优待'}}
                </view>
                <view v-if="privilege.ptype == 3" style="margin-top:20rpx">
                    {{privilege.illustrate ? (privilege.value ? privilege.illustrate+'(加'+privilege.value+'倍)' : '') : '暂无特殊优待'}}
                </view>
                <view v-if="privilege.ptype != 3 && privilege.ptype != 1" style="margin-top:20rpx">
                    {{privilege.illustrate || '暂无特殊优待'}}
                </view>
            </view>
        </view>
        <view class="opening" @tap="openMem">立即升级</view>
        <u-popup :show="payTypeFlag" @close="onClose" mode="bottom">
            <view class="payConter" @tap="hideMemberDrop">
                <view class="payConter__top ">
                    <u-icon label="会员升级" labelColor="#000" labelSize="15" space="10" name="arrow-left" @tap="onClose"></u-icon>
                </view>
                <view class="payConter__openingMode">
                    <view>当前等级</view>
                    <view>{{curMember.rankName}}</view>
                </view>
                <view class="payConter__openingMode">
                    <view>剩余时间</view>
                    <view>{{remainDate}}天</view>
                </view>
                <view class="payConter__openingMode">
                    <view>升级会员等级</view>
                    <view style="position:relative;" @tap.stop="onShowMember">
                        <u-icon :label="selectOption.rankName" labelPos="left" labelColor="#666" labelSize="15" space="10" name="arrow-down" v-if="memberLevel.options.length > 1" style="margin-left:10rpx">
                        </u-icon>
                        <view class="custom__drop--down" v-if="memberLevel.options.length > 1 && showMemberDrop">
                            <view v-for="(item, index) in memberLevel.options" :key="index"
                                :class="['member-item',item.rankCode == memberLevel.rankCode && 'member-item-active']"
                                @tap.stop="onMemberSelect" :data-code="item.rankCode">
                                {{item.rankName}}
                            </view>
                        </view>
                    </view>
                </view>
                <view class="payConter__openingMode">
                    <view>价格</view>
                    <view v-if="openType == '1'">
                        ¥{{selectOption.openValue}}/{{selectOption.useInDate}}天
                    </view>
                    <view v-if="openType == '2'">
                        {{selectOption.openValue}}积分/{{selectOption.useInDate}}天
                    </view>
                </view>
                <view class="payConter__openingMode">
                    <view>实际支付</view>
                    <view>
                        {{openType == '1'?'¥':''}}{{selectOption.actualOpenValue}}{{openType == '2'?'积分':''}}
                    </view>
                </view>
                <view v-if="openType == 1" class="payConter__openingMode">
                    <view>支付方式</view>
                    <view style="position:relative;" @tap.stop="onShowPayType">
                        {{payType.text}}
                        <u-icon name="arrow-down" style="margin-left:10rpx"></u-icon>
                        <view class="custom__drop--down" v-if="showPayType">
                            <view v-for="(item, index) in payType.options" :key="index"
                                :class="['member-item',item.type == payType.type && 'member-item-active']"
                                @tap.stop="onPayTypeSelect" :data-type="item.type">
                                {{item.text}}
                            </view>
                        </view>
                    </view>
                </view>
                <view v-if="openType == 2" style="display:flex;justify-content:center">
                    <text class="can__use">当前可用积分{{useAmount}}</text>
                    <view
                        :class="['payConter__btn',selectOption.actualOpenValue>useAmount || useAmount == 0&&'payConter__btn-no']"
                        @tap="paySure">
                        {{(selectOption.actualOpenValue>useAmount || useAmount == 0) ? '积分不足':'确认兑换'}}
                    </view>
                </view>
                <view v-if="openType == 1" style="display:flex;justify-content:center">
                    <text class="can__use" v-if="payType.type == 2">当前可用余额¥{{accountBalance}}</text>
                    <view
                        :class="['payConter__btn ',(((selectOption.actualOpenValue>accountBalance&&payType.type==2) || (payType.type==2 && accountBalance == 0))&&'payConter__btn-no')]"
                        @tap="paySure">
                        {{((selectOption.actualOpenValue>accountBalance&&payType.type==2) || (payType.type==2 && accountBalance == 0)) ? '余额不足':'确认支付'}}
                    </view>
                </view>
            </view>
        </u-popup>
        <u-popup :show="openFlag" @close="onClose" round="25" :customStyle="{top:'40%'}">
            <view class="congratulate">
                <view class="congratulate__text ">恭喜!</view>
                <view class="congratulate__text ">您的{{selectOption.rankName}}开通成功</view>
                <view class="congratulate__img">
                    <image :src="selectOption.backGroundPicUrl" style="width:400rpx;height:200rpx"></image>
                </view>
                <view class="congratulate__sure">
                    <view @tap="onClose" class="congratulate__sure--btn">确 定</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>
<script lang='ts'>
    import {
        Component,
        Vue
    } from 'vue-property-decorator'
    import {
        upgradeMemberRank,
        getMemberCardUpgrade
    } from "@/api/modules/member";
    import {
        ptypeMapIcon
    } from "@/utils/const";

    @Component
    export default class MemberUpdate extends Vue {
        memShow: boolean = false // 会员授权弹窗
        accountBalance: number = 0 // 可用余额
        ptypeMapIcon = ptypeMapIcon
        nextFlag: boolean = true
        memberCards: Array < any >= []
        canUpdateMembers: Array < any >= []
        memberNumber = null
        curMember = {}
        useAmount: number = 0 // 可用积分
        selectOption: any = {}
        defaultImg: string = "https: //oss-tencent.bgniao.cn/api/general_card.png"
        currentIndex: number = 0 // 当前轮播图下标
        privilegeList: Array < any >= []
        memDescFlag: boolean = false // 会员说明弹窗
        payTypeFlag: boolean = false // 底部弹起购买方式
        openFlag: boolean = false // 成功购买弹窗
        openType: number = 1
        payType = {
            options: [{
                    type: 1,
                    text: "微信支付"
                },
                {
                    type: 2,
                    text: "余额支付"
                },
            ],
            type: 1,
            text: "微信支付",
        }
        memberLevel: any = {}
        memberLabel: string = "普卡会员"
        showMemberDrop: boolean = false
        showPayDrop: boolean = false
        userInfoShow: boolean = false
        avatarUrl:string=''
        nikeName:string=''
        remainDate:number | string =''
        privilege:any={}
        privilegeIndex:number=0
        showPayType:boolean=true
  onLoad(options) {
    uni.showLoading({
      title: "加载中",
    });
    getMemberCardUpgrade({ memberId: options.memberId })
      .then(data => {
        const memberCards = (data.memberCardInfoCenterVos || []).filter(
          v => v.isOpen + "" === "1",
        );
        const canUpdateMembers = (memberCards || []).filter(
          v => v.rankCode > data.rankCode,
        );
        // const curMemberCard = memberCards[0];
        // const expriseDate = new Date(curMemberCard.memberExpireTime);
        // const curDate = new Date();
        // const expriseTime = `${expriseDate.getFullYear()}-${expriseDate.getMonth() +
        //   1}-${expriseDate.getDate()}`;
        // const curTime = `${curDate.getFullYear()}-${curDate.getMonth() +
        //   1}-${curDate.getDate()}`;
        const privilegeList = (
          memberCards[0].memberCardPrivileges || []
        ).filter(v => v.isSelected + "" === "1");
        uni.hideLoading();
        this.setData({
          avatarUrl: data.avatarUrl,
          nikeName: data.nikeName,
          memberCards,
          canUpdateMembers,
          memberNumber: data.memberNumber,
          accountBalance: data.accountBalance,
          useAmount: data.useAmount,
        //   leftDate: this.dateDiff(expriseTime, curTime),
          remainDate: data.remainDate,
          privilegeList,
          openType: memberCards[0].openType,
          privilege: privilegeList[0] || {},
          privilegeIndex: 0,
          curMember: { rankName: data.rankName, rankCode: data.rankCode },
          memberLevel: {
            options: canUpdateMembers,
            rankCode: canUpdateMembers[0].rankCode,
          },
          selectOption: canUpdateMembers[0],
        });
      })
      .catch(err => {
        uni.hideLoading();
        uni.showToast({
          title: err || "获取会员卡失败",
          icon: "none",
          duration: 2000,
        });
        // Toast('升级失败');
      });
  }
    /**
   * 轮播图滑动
   */
  handleChange(e) {
    const memberCard: any = this.memberCards[e.detail.current];
    // const curMemberCard: any = this.memberCards[e.detail.current];
    const privilegeList = (memberCard.memberCardPrivileges || []).filter(
      v => v.isSelected + "" === "1",
    );
    // const expriseDate = new Date(curMemberCard.memberExpireTime);
    // const curDate = new Date();
    // const expriseTime = `${expriseDate.getFullYear()}-${expriseDate.getMonth() +
    //   1}-${expriseDate.getDate()}`;
    // const curTime = `${curDate.getFullYear()}-${curDate.getMonth() +
    //   1}-${curDate.getDate()}`;
    this.setData({
      currentIndex: e.detail.current,
      privilegeList,
      privilege: privilegeList[0] || {},
      privilegeIndex: 0,
    //   leftDate: this.dateDiff(expriseTime, curTime),
      openType: memberCard.openType,
    });
  }
dateDiff(sDate1, sDate2) {
    //sDate1和sDate2是yyyy-MM-dd格式
    let aDate = sDate1.split("-");
    const oDate1: any = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]); //转换为yyyy-MM-dd格式
    aDate = sDate2.split("-");
    const oDate2: any = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]);
    const iDays = Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24; //把相差的毫秒数转换为天数
    return iDays; //返回相差天数
  }
    /**
   * 弹窗下一步操作
   */
  nextInput() {
    this.setData({ nextFlag: false });
  }
    /**
   * 立即开通
   */
  openMem() {
    const memberCards: any[] = this.memberCards;
    const curMember: any = this.curMember;
    if (memberCards.every(v => v.rankCode <= curMember.rankCode)) {
      uni.showToast({
        title: "您已经是最高等级，无需升级",
        icon: "none",
        duration: 2000,
      });
      return null;
    }
    this.setData({ payTypeFlag: true });
    return null;
  }
    /**
   * 开通成功
   */
  paySure() {
    const {
      openType,
      useAmount,
      memberNumber,
      payType,
      accountBalance,
    } = this['_data'];
    const selectOption: any = this.selectOption;
    if (
      (openType === 2 &&
        payType.type === 2 &&
        selectOption.actualOpenValue > useAmount) ||
      useAmount + "" === "0"
    ) {
      uni.showToast({
        title: "余额不足",
        icon: "none",
        duration: 1500,
      });
      return null;
    }
    if (
      (openType + "" === "1" &&
        payType.type + "" === "2" &&
        selectOption.actualOpenValue > accountBalance) ||
      accountBalance + "" === "0"
    ) {
      uni.showToast({
        title: "积分不足",
        icon: "none",
        duration: 1500,
      });
      return null;
    }
    upgradeMemberRank({
      memberNumber: memberNumber,
      openType: openType,
      paymentType: openType + "" === "1" ? payType.type : undefined,
      rankName: selectOption.rankName,
      rankCode: selectOption.rankCode,
      availableAmount: selectOption.actualOpenValue,
      useAmount,
    })
      .then(res => {
        if (openType === 2 || (openType === 1 && payType.type === 2)) {
          uni.showToast({
            title: "升级成功",
            icon: "success",
            duration: 2000,
          });
          uni.navigateTo({
            url: `/subcontract/pages/memberVip/memberVip`,
          });
          return false;
        }
        payType.type === 1 &&
          uni.requestPayment({
            timeStamp: res.wxResult?.timeStamp,
            nonceStr: res.wxResult?.nonceStr,
            package: res.wxResult?.packageValue,
            signType: res.wxResult?.signType,
            paySign: res.wxResult?.paySign,
            success: () => {
              this.setData({ payTypeFlag: false, openFlag: false });
              uni.showToast({
                title: "升级成功",
                icon: "success",
                duration: 2000,
              });
              uni.navigateTo({
                url: `/subcontract/pages/memberVip/memberVip`,
              });
              // Toast('升级成功');
            },
            fail: e => {
              const isCancel = msg => msg.includes("cancel");
              if (!isCancel(e.errMsg)) {
                uni.showToast({
                  title: "升级失败",
                  icon: "none",
                  duration: 2000,
                });
                // Toast('升级失败');
              }
            },
          });
        return null;
      })
      .catch(err => {
        uni.showToast({
          title: err || "升级失败",
          icon: "none",
          duration: 2000,
        });
        // Toast('升级失败');
      });
    return null;
  }
    onPassMember() {
    this.setData({ openFlag: true, userInfoShow: false });
  }
    /**
   * 关闭弹窗
   */
  onClose() {
    this.setData({
      memShow: false,
      memDescFlag: false,
      payTypeFlag: false,
      openFlag: false,
      userInfoShow: false,
    });
  }
    onShowPayType() {
    this.setData({
      showPayType: true,
    });
  }
    onPayTypeSelect(e) {
    const payType = this.payType;
    payType.type = e.currentTarget.dataset.type;
    const selectOption: any =
      payType.options.find(v => v.type + "" === payType.type + "") || {};
    payType.text = selectOption.text;
    this.setData({
      showPayType: false,
      payType,
    });
  }
    onShowMember() {
    this.setData({
      showMemberDrop: true,
    });
  }

  hideMemberDrop() {
    this.setData({
      showMemberDrop: false,
      showPayType: false,
    });
  }
    onPrivilegeTap(e) {
    const index = e.currentTarget.dataset.index;
    this.setData({
      privilege: this.privilegeList[index],
      privilegeIndex: index,
    });
  }
    onMemberSelect(e) {
    const memberLevel: any = this.memberLevel;
    memberLevel.rankCode = e.currentTarget.dataset.code;
    const selectOption: any =
      memberLevel.options.find(
        v => v.rankCode + "" === memberLevel.rankCode + "",
      ) || {};
    this.setData({
      showMemberDrop: false,
      memberLevel,
      selectOption: selectOption,
    });
  }
}
</script>
<style lang="scss" scoped>
    @mixin middle-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .phoneAuthorize {
        position: fixed;
        width: 500rpx;
        height: 90rpx;
        background-color: #EAC67A;
        bottom: 450rpx;
        font-size: 32rpx;
        @include middle-center;
    }

    .phoneAnother {
        position: fixed;
        width: 500rpx;
        height: 90rpx;
        background-color: #3C3B43;
        bottom: 300rpx;
        font-size: 32rpx;
        border: 1rpx solid #EAC67A;
        color: #EAC67A;
        @include middle-center;
    }

    .pop {
        // height: 600rpx;
        height: 100%;
        font-size: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .pop__top {
        background-color: #EDEBEC;
        padding-left: 40rpx;
        padding-right: 40rpx;
        padding-top: 30rpx;
        padding-bottom: 30rpx;
        color: #9C9C9C;
    }

    .pop__conter {
        margin-top: 40rpx;

        &--text {
            color: #9C9C9C;
            margin-left: 40rpx;
            margin-right: 40rpx;
            padding-bottom: 20rpx;
            border-bottom: 1rpx solid #F7F5F6;
        }

        &--phone {
            color: #9C9C9C;
            margin-left: 40rpx;
            margin-right: 40rpx;
            padding-bottom: 40rpx;
            padding-top: 40rpx;
            border-bottom: 1rpx solid #F7F5F6;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    .pop__conter--phone--text {
        width: 600rpx;
        display: flex;
        align-items: center;
    }

    .pop__conter--phone--code {
        width: 200rpx;
        height: 50rpx;
        border-radius: 25rpx;
        border: 1rpx solid #E0C286;
        color: #B7B7B7;
        font-size: 28rpx;
        display: flex;
        @include middle-center;
    }

    .pop__next {
        width: 500rpx;
        height: 80rpx;
        background-color: #DAB46B;
        color: white;
        border-radius: 40rpx;
        @include middle-center;
    }

    .topUser {
        background-color: #3E3D45;
        padding-top: 20rpx;
        padding-left: 40rpx;
        padding-right: 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        color: #fff;

        &__left {
            display: flex;
            align-items: center;

            &--phone {
                margin-left: 20rpx;
            }
        }

        &__right {
            display: flex;
            align-items: center;
        }
    }


    .descConter {
        width: 700rpx;
        background-color: #FFF6E5;
        border-radius: 15rpx;
        padding-bottom: 40rpx;
    }

    .descConter__top {
        padding-top: 20rpx;
        font-size: 32rpx;
        font-weight: bold;
        background: linear-gradient(to right, #63583A, #AC941F);
        background-clip: text;
        color: transparent;
        display: flex;
        justify-content: center;

        &--icon {
            display: flex;
            justify-content: flex-end;
            margin-top: -40rpx;
            margin-right: 20rpx;
        }
    }

    .descConter__conter {
        margin-left: 40rpx;
        margin-top: 20rpx;
        font-size: 26rpx;
        margin-right: 40rpx;

        &__title {
            line-height: 35rpx;

            >text {
                display: inline-block;
                width: 35rpx;
                height: 35rpx;
                text-align: center;
                line-height: 35rpx;
                border-radius: 35rpx;
                background-color: rgba(235, 200, 98, 1);
            }
        }

        &_con {
            font-size: 24rpx;
            color: #666;
        }
    }

    .imageContainer {
        width: 100%;
        height: 400rpx;
        background-color: #3E3D45;

    }

    .imageContainer__swiperItem {
        height: 350rpx;
    }

    .imageContainer__swiperItem__itemImg,
    .imageContainer__swiperItem__content {
        position: absolute;
        width: 100%;
        height: 230rpx;
        border-radius: 15rpx;
        z-index: 5;
        opacity: 0.7;
        top: 13%;
    }

    .imageContainer__swiperItem__itemImg--active,
    .imageContainer__swiperItem__content__active {
        opacity: 1;
        z-index: 10;
        height: 310rpx;
        top: 7%;
        transition: all .2s ease-in 0s;
    }

    .privilege {
        margin-top: 50rpx;
        padding: 20rpx;
    }

    .privilege__sign {
        width: 12rpx;
        height: 40rpx;
        background-color: #E1B56A;
        margin-right: 20rpx;
    }

    .privilege-img {
        width: 50rpx;
        height: 50rpx;

        &-active {
            width: 60rpx;
            height: 60rpx;
        }
    }

    .privilege__conter {
        display: flex;
        // justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 10rpx;
    }

    .privilege__conter--list {
        width: 25%;
        margin-bottom: 10rpx;
        margin-top: 10rpx;
        flex-wrap: wrap;
        font-size: 24rpx;
        display: flex;
        justify-content: center;

        .privilege__conter--list--item {
            width: 100rpx;
            height: 100rpx;
            // background-color: #FFFBF0;
            border-radius: 100%;
            @include middle-center;
        }
    }

    .privilege__desc {
        padding: 20rpx;
        margin: 20rpx;
        border: 1rpx solid #EFEFEF;
        font-size: 26rpx;
    }

    .opening {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 90rpx;
        font-size: 30rpx;
        font-weight: bold;
        color: white;
        background: linear-gradient(to right, #EBCC89, #B4893B);
        @include middle-center;
    }

    .payConter {
        height: 780rpx;
        padding: 20rpx;
    }

    .payConter__top {
        font-size: 34rpx;
        display: flex;
        align-items: center;
    }

    .payConter__num {
        padding: 60rpx;
        font-size: 80rpx;
        @include middle-center;
    }

    .payConter__openingMode {
        font-size: 32rpx;
        padding-left: 20rpx;
        padding-right: 20rpx;
        color: #666666;
        display: flex;
        justify-content: space-between;
        margin: 40rpx 0;
    }

    .payConter__btn {
        margin-top: 80rpx;
        width: 450rpx;
        height: 80rpx;
        border-radius: 50rpx;
        background-color: #FE4E63;
        color: white;
        font-size: 30rpx;
        box-shadow: 0px 0px 40px #FEDBDF;
        @include middle-center;

        &-no {
            background-color: #aaa;
        }
    }

    .congratulate {
        width: 600rpx;
        height: 650rpx;

        &__text {
            margin-top: 40rpx;
            font-size: 36rpx;
            display: flex;
            justify-content: center;
        }

        &__img {
            margin-top: 40rpx;
            display: flex;
            justify-content: center;
        }
    }

    .congratulate__sure {
        margin-top: 80rpx;
        display: flex;
        justify-content: center;

        &--btn {
            width: 400rpx;
            height: 60rpx;
            border-radius: 50rpx;
            background: linear-gradient(to right, #EBCC89, #B4893B);
            color: white;
            font-size: 28rpx;
            @include middle-center;
        }
    }

    .imageContainer__swiperItem__content {
        z-index: 100;
        padding: 40rpx 32rpx;
        color: #fff;
    }

    .good-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 24rpx;
    }

    .good-list-item {
        width: 49%;
        height: 500rpx;
        margin-bottom: 14rpx;
        position: relative;

        >image {
            width: 100%;
            background-color: #666;
            object-fit: cover;
        }
    }

    .custom__drop--down {
        position: absolute;
        width: 200rpx;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        padding: 20rpx;
        z-index: 1000;
        right: 0;
    }

    .member-item {
        margin: 15rpx 0;

        &-active {
            color: #E1B56A;
        }
    }

    .popup-wrap {
        .van-popup--bottom.van-popup--safe {
            height: 100%;
        }
    }

    .imageContainer__swiperItem__paymount {
        // box-shadow: -2px 2px 2px #888888;
        font-size: 30rpx;
        position: absolute;
        bottom: 40rpx;
        left: 32rpx;
        padding: 12rpx 36rpx;
        border-radius: 80rpx;
        // background: linear-gradient(to right, rgb(202,191,212), rgb(138, 142,145));
        background-color: #fff;
        color: #666;
    }

    .can__use {
        position: absolute;
        font-size: 24rpx;
        color: #999;
    }
</style>